<!--常见问题解答-->
<template>
  <section class="page">
    <headerbar>
      {{channelName}}
    </headerbar>
    <div class="d-scroll list-news-img list-block" style="">
      <fetchData
        class="people-list"
        :loading="isLoading"
        :data="list"
      ></fetchData>
      <cube-scroll
        ref="scroll"
        :options="options"
        :scrollEvents="['scroll-end']"
        @pulling-up="onPullingUp"
        @pulling-down="onPullingDown"
        @scroll-end="scrollEnd"
        v-remainScroll="'myCommonQuestion'"
      >
        <div class="item" @click="goDetail(item)" v-for="(item,index) in topList" :key="index">
          <!--      没有图片则不显示-->
          <div class="img" v-if="tools.indexOfHttp(item.listPicUrl)">
            <img :src="item.listPicUrl" alt="">
          </div>
          <div class="img" v-else-if="item.listPic">
            <img :src="tools.getImgUrl(item.listPic,true)" alt="">
          </div>
          <!--      没有图片则不显示结束-->
          <div class="cont">
            <h2 class="title" ><div class="hower"><span class="top-flag">置顶</span>{{item.title}}</div></h2>
  <!--          <div class="tip no-wrap">
              <span class="no-wrap">{{tools.formatDate(item.createTime)}}</span>
              <span class="source">{{item.source || '未知'}}</span>
              &lt;!&ndash;          <span class="no-wrap">阅读  {{item.views || 0}}</span>&ndash;&gt;
              <broadcast :item="item"/>
            </div>-->
          </div>
        </div>
  <!--      <div class="item" @click="goDetail(item)" v-for="(item,index) in recommend" :key="'n-'+index">
          &lt;!&ndash;      没有图片则不显示&ndash;&gt;
          <div class="img" v-if="tools.indexOfHttp(item.listPicUrl)">
            <img :src="item.listPicUrl" alt="">
          </div>
          <div class="img" v-else-if="item.listPic">
            <img :src="tools.getImgUrl(item.listPic,true)" alt="">
          </div>
          &lt;!&ndash;      没有图片则不显示结束&ndash;&gt;
          <div class="cont">
            <h2 class="title"><div class="hower">{{item.title}}</div></h2>
            <div class="tip no-wrap" v-if="item.zhuanji != 1">
              <span class="no-wrap">{{tools.formatDate(item.createTime)}}</span>
              <span class="source">{{item.source || '未知'}}</span>
              &lt;!&ndash;          <span class="no-wrap">阅读  {{item.views || 0}}</span>&ndash;&gt;
              <broadcast :item="item"/>
            </div>
          </div>
        </div>-->
        <div class="item" @click="goDetail(item)" v-for="(item,index) in list" :key="'m' + index">
          <!--      没有图片则不显示-->
          <div class="img" v-if="item.picOssUrl && tools.indexOfHttp(item.picOssUrl)">
            <img :src="item.picOssUrl" alt="">
          </div>
          <div class="img" v-else-if="tools.indexOfHttp(item.listPicUrl)">
            <img :src="item.listPicUrl" alt="">
          </div>
          <div class="img" v-else-if="item.listPic">
            <img :src="tools.getImgUrl(item.listPic,true)" alt="">
          </div>
          <!--      没有图片则不显示结束-->
          <div class="cont">
            <h2 class="title"><div class="hower">{{item.title}}</div></h2>
  <!--          <div class="tip no-wrap" v-if="item.zhuanji != 1">
              <span class="no-wrap">{{tools.formatDate(item.createTime)}}</span>
              <span class="source">{{item.source || '未知'}}</span>
              &lt;!&ndash;          <span class="no-wrap">阅读  {{item.views || 0}}</span>&ndash;&gt;
              <broadcast :item="item"/>
            </div>-->
          </div>
        </div>
        <fetchData :loading="isLoading" :data="list"></fetchData>
        <noData v-if="!hasList() && !isLoading"></noData>
        <onBottom v-else-if="onBottom"></onBottom>
      </cube-scroll>
    </div>
  </section>

</template>

<script>
import _ from 'lodash'
export default {
  name: 'myCommonQuestion',
  data () {
    return {
      pageIndex: 1,
      pageSize: 10,
      menuId: '',
      isLoading: true,
      menuList: [],
      list: [],
      topList: [],
      recommend: [],
      options: {
        pullUpLoad: true,
        pullDownRefresh: {
          txt: ' '
        },
        scrollbar: false
      },
      all: {
        list: [],
        topList: [],
        recommend: []
      },
      excludeIds: [],
      onBottom:false,
      channelName:'常见问题',
      chanelId:'00f27210c6c945e39dbaf2a3b381247f'
    }
  },
  watch: {
    $route (to, from) {
      let routeName = to.name
      if (routeName !== 'myCommonQuestion') {
        return false
      }
      this.init()
    },
  },
  created () {
    // this.fetchList(this.chanelId)
  },
  activated () {
    this.$nextTick(() => {
      if (this.list.length > 0 && this.y !== undefined && this.$refs.scroll) {
        console.log('resume position')
        this.$refs.scroll.scroll.scrollTo(0, this.y)
      }
      this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
    })
  },
  mounted () {
    console.log(this.$route.name, 'mounted')
    // 第一次加载时候也需要加载
    this.init()
  },
  methods: {
    init () {
      this.menuId = this.chanelId
      // 只有当初始化没有数据时才会请求数据
      if (this.list.length === 0) {
        this.fetchList(this.chanelId)
      }
    },
    goDetail (item) {
      this.$router.push({name: 'myCommonQuestionDetail', params: {id: item.id,channelName:this.channelName}})
    },
    fetchList (id) {
      this.excludeIds = []
      this.topList.map((v) => {
        this.excludeIds.push(v.id)
      })
      this.recommend.map((v) => {
        this.excludeIds.push(v.id)
      })
      this.isLoading = true
      id = id || this.menuId
      let data = {
        "channelId": id || "",
        "pageNo": this.pageIndex,
        "pageSize": this.pageSize,
        "summary": "",
        "title": "",
        excludeIds: this.excludeIds
      }
      return this.fetchService.specialList(data).then(res => {//调用带合集的通用接口
        this.isLoading = false
        if (res.code !== 0) {
          return this.tools.alert(res.message || res.resp_msg)
        }
        if(res.data.album.length === 0 && res.data.page.length === 0){
          this.onBottom = true
          this.options.pullUpLoad = false
        }
        this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
        if (this.pageIndex === 1) {
          this.list = []
          this.topList = []
          this.recommend = []
        }
        if (res.data.album && res.data.album.length > 0) {
          res.data.album.map((v) => {
            v.title = v.channelName
            v.listPic = v.pic
            v.zhuanji = 1
          })
          this.list = this.list.concat(res.data.album)
        }
        res.data.page.forEach(item=>{
          if(item.isTop=== 1){//判断是否是置顶
            // let top = res.data.top || []
            this.topList = this.tools.uniqueById(this.topList.concat(item))
          }else{
            this.list =  this.tools.uniqueById(this.list.concat(item))
          }
        })
        let recommendList = res.data.recommend || []
        this.recommend = this.tools.uniqueById(this.recommend.concat(recommendList))
        this.pageIndex ++
        return res
      })
    },
    hasList () {
      return this.list.length > 0 || this.topList.length > 0
    },
    onPullingDown () {
      console.log('onPullingDown')
      this.pageIndex = 1
      this.list = []
      this.topList = []
      this.fetchList()
      this.onBottom = false
      this.options.pullUpLoad = true
    },
    onPullingUp () {
      this.fetchList().then(res => {
        setTimeout(() => {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
          this.options.isPullUpLoad = false
        }, 100)
      })
    },
    scrollEnd ({x, y}) {
      this.y = y
      console.log('scrollEnd', this.y)
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
.head-bd {
  transform:translateX(pxToRem(-35px));
}
.list-news-img{
  margin-top: 0px;
}
.home-banner-wrap {
  background: rgba(255, 255, 255, 0.9);
  height: pxToRem(350px);
  width: 100%;
  .home-banner {
    position: relative;
    @include fullImg();

    .text {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      color: #fff;
      padding: 5px 8px;
      overflow: hidden;
    }
    img {
      @include fullImg();
    }
  }
}
.home-icon-btns {
  background: rgba(255, 255, 255, 0.9);
  padding: pxToRem(54px) 0 pxToRem(40px);
  .icon-btns {
    .item {
      .img {
        margin-bottom: pxToRem(14px);
      }
    }
  }
}
.scroll-imgs {
  background: rgba(255, 255, 255, 0.9);
  padding: pxToRem(20px);
  padding-top: 0;
  overflow-y: auto;
  ul {
    display: flex;
  }
  li {
    width: pxToRem(496px);
    height: pxToRem(198px);
    flex-shrink: 0;
    border: 1px solid rgba(255, 183, 183, 1);
    box-shadow: 0px 4px 6px 0px rgba(54, 0, 0, 0.23);
    margin-right: pxToRem(20px);
    &:last-child {
      /*margin-right:0;*/
    }
    img {
      @include fullImg();
    }
  }
}
.platform {
  background: rgba(255, 255, 255, 0.9);
  margin: pxToRem(30px) 0;
  padding: pxToRem(30px) pxToRem(37px);
  h2 {
    font-size: pxToRem(26px);
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    margin-bottom: pxToRem(30px);
    .more-text {
      color: $theme-color;
      font-size: pxToRem(20px);
      float: right;
    }
  }
  .list-squareness {
    display: flex;
    justify-content: space-between;
    li {
      width: pxToRem(210px);
      height: pxToRem(210px);
      background: rgba(255, 250, 241, 1);
      box-shadow: 0px 4px 6px 0px rgba(54, 0, 0, 0.1);
      border-radius: pxToRem(6px);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      img {
        width: pxToRem(98px);
        height: pxToRem(98px);
        border-radius: 100%;
        margin-bottom: pxToRem(12px);
      }
    }
  }
}

/*组工信息*/
.top-banner {
  height:195px;
  position: relative;
  /*border:1px solid rgba(192, 192, 192, 0.55);*/
  img {
    @include fullImg();
  }
  .read-number {
    position:absolute;
    right:80px;
    bottom:10px;
    color:#666;
    font-size: 14PX;
  }
}
.no-zugong{
  /*margin-right: 1%;*/
}

</style>

